<script lang="ts" setup>
import { useAsyncState, useDebounceFn } from "@vueuse/core"
import { useCharacterStore, useConfigStore } from "@/store";
import { getImage } from "@/utils";

const showMode = ref(true);

const configStore = useConfigStore()
const charStore = useCharacterStore()

const result = useAsyncState(
  () => {
    return configStore.calc()
  },
  {
    id: undefined,
    equips: [],
    role: "delear",
    name: "",
    alter: "",
    skills: {},
    total_data: [0],
    info: undefined,
    skills_passive: undefined,
    jade: undefined,
    equips_forge: {},
    customize: {},
    fusion_list: [],
    merge_list: {}
  },
  { resetOnExecute: true }
)

watch(() => charStore.alter, useDebounceFn(async () => {
  await result.execute()
}, 500))

const skills = computed(() => {
  if (result.state.value.role == "buffer") {
    return []
  }
  const temp: any[] = []

  Object.keys(result.state.value.skills).forEach(skill => {
    const current_damage = result.state.value.skills[skill].damage
    temp.push({
      name: skill,
      cd: result.state.value.skills[skill].cd,
      cd_o: result.state.value.skills[skill].cd_o,
      count: result.state.value.skills[skill].count,
      damage: current_damage,
      order: result.state.value.skills[skill].damage
    })
  })
  temp.sort((a, b) => b.order - a.order)
  return temp
})
</script>

<template>
  <view class="calc-res-box">
    <view class="flex items-center" style="font-size: 13px;">
      <text :class="{ selected: !showMode }" @tap="showMode = !showMode">
        技能详情
      </text>
      <switch :checked="showMode" color="#ffcc33" style="transform: scale(0.6)" @change="showMode = !showMode" />
      <text :class="{ selected: showMode }" @tap="showMode = !showMode">
        人物属性
      </text>
    </view>
    <view class="sotre-fangan-info">
      <view class="hr" />
      <view class="store-eq-data-row">
        <view v-if="charStore.is_delear" class="data text-hex-3e8848">
          {{ ((result.state.value.total_data?.[0] ?? 0) / 100000000).toFixed(2) }}亿
        </view>
        <view v-else class="data text-hex-3e8848">
          {{ (result.state.value.total_data?.[0] ?? 0).toFixed(2) }}%
        </view>
      </view>
    </view>
    <view v-if="showMode">
      <view v-if="charStore.is_delear" class="calc-res-box">
        <view class="hr" />
        <view class="store-eq-data-row">
          <view class="store-eq-data-cell">
            <span class="data-cell-label">力智</span>
            <span class="data-cell-data">{{
              (result.state.value.info?.站街?.力量 ?? result.state.value.info?.站街?.智力 ?? 0).toFixed(0)
            }}</span>
          </view>
          <view class="store-eq-data-cell">
            <span class="data-cell-label">攻击力</span>
            <span class="data-cell-data">{{ (result.state.value.info?.站街?.物理攻击 ?? result.state.value.info?.站街?.魔法攻击 ?? result.state.value.info?.站街?.独立攻击 ?? 0).toFixed(0) }}</span>
          </view>
        </view>
        <view class="store-eq-data-row">
          <view class="store-eq-data-cell">
            <span class="data-cell-label">技能攻击力</span>
            <span class="data-cell-data">{{
              (result.state.value.info?.properties?.技能攻击力 ?? 0).toFixed(2)
            }}%</span>
          </view>
          <view class="store-eq-data-cell">
            <span class="data-cell-label">攻强</span>
            <span class="data-cell-data">{{ `${
              result.state.value.info?.properties?.攻击强化.toFixed(1)
            }%(${result.state.value.info?.properties?.百分比攻击强化?.toFixed(0)}%)` }}</span>
          </view>
        </view>
        <view class="store-eq-data-row">
          <view class="store-eq-data-cell only-cell">
            <span class="data-cell-label">属性强化</span>
            <span class="data-cell-data">{{ `火 (${result.state.value.info?.站街?.火?.toFixed(
              0
            )})  冰 (${result.state.value.info?.站街?.冰?.toFixed(
              0
            )})  光 (${result.state.value.info?.站街?.光?.toFixed(
              0
            )})  暗 (${result.state.value.info?.站街?.暗?.toFixed(0)})` }}</span>
          </view>
        </view>
        <view class="store-eq-data-row">
          <view class="store-eq-data-cell only-cell">
            <span class="data-cell-label">属性抗性</span>
            <span class="data-cell-data">{{ `火 (${result.state.value.info?.站街?.火抗?.toFixed(
              0
            )})  冰 (${result.state.value.info?.站街?.冰抗?.toFixed(
              0
            )})  光 (${result.state.value.info?.站街?.光抗?.toFixed(
              0
            )})  暗 (${result.state.value.info?.站街?.暗抗?.toFixed(0)})` }}</span>
          </view>
        </view>
        <view class="hr" />
        <view class="store-eq-data-row">
          <view class="store-eq-data-cell">
            <span class="data-cell-label">技能范围Σ</span>
            <span class="data-cell-data">{{
              ((result.state.value.info?.properties?.技能范围 ?? 0) * 100).toFixed(0)
            }}%</span>
          </view>
          <view class="store-eq-data-cell">
            <span class="data-cell-label">保护罩</span>
            <span class="data-cell-data">{{
              ((result.state.value.info?.properties?.保护罩 ?? 0) * 100).toFixed(0)
            }}%</span>
          </view>
        </view>
        <view class="store-eq-data-row">
          <view class="store-eq-data-cell">
            <span class="data-cell-label">装备CDR</span>
            <span class="data-cell-data">{{
              ((1 - (result.state.value.info?.properties?.冷却缩减 ?? 0) / (1 + (result.state.value.info?.properties?.冷却恢复 ?? 0))) * 100).toFixed(2)
            }}%</span>
          </view>
          <view class="store-eq-data-cell">
            <span class="data-cell-label">MP消耗量%</span>
            <span class="data-cell-data">{{
              ((result.state.value.info?.properties?.MP消耗量 ?? 0)).toFixed(0)
            }}%</span>
          </view>
        </view>
        <view class="store-eq-data-row">
          <view class="store-eq-data-cell only-cell">
            <span class="data-cell-label">装备速度</span>
            <view class="data-cell-data flex items-center flex-1 justify-end">
              <image class="w-15px h-15px" :src="getImage('common/icon/6.png')" />
              {{ ((result.state.value.info?.properties?.攻击速度 ?? 0) * 100).toFixed(2) }}%
              <image class="w-15px h-15px" :src="getImage('common/icon/7.png')" />
              {{ ((result.state.value.info?.properties?.施放速度 ?? 0) * 100).toFixed(2) }}%
              <image class="w-15px h-15px" :src="getImage('common/icon/8.png')" />
              {{ ((result.state.value.info?.properties?.移动速度 ?? 0) * 100).toFixed(2) }}%
            </view>
          </view>
        </view>
        <view class="hr" />
        <view class="store-eq-data-row">
          <view class="store-eq-data-cell">
            <span class="data-cell-label">中毒伤害</span>
            <span class="data-cell-data">
              {{ `${((result.state.value.info?.properties?.伤害比例?.[1] ?? 0) * 100).toFixed(
                0
              )}%(+${(
                (result.state.value.info?.properties?.伤害系数?.[1] ?? 0) * 100
              ).toFixed(0)}%)` }}
            </span>
          </view>
          <view class="store-eq-data-cell">
            <span class="data-cell-label">灼伤伤害</span>
            <span class="data-cell-data">
              {{ `${((result.state.value.info?.properties?.伤害比例?.[2] ?? 0) * 100).toFixed(
                0
              )}%(+${(
                (result.state.value.info?.properties?.伤害系数?.[2] ?? 0) * 100
              ).toFixed(0)}%)` }}
            </span>
          </view>
        </view>
        <view class="store-eq-data-row">
          <view class="store-eq-data-cell">
            <span class="data-cell-label">感电伤害</span>
            <span class="data-cell-data">
              {{ `${((result.state.value.info?.properties?.伤害比例?.[3] ?? 0) * 100).toFixed(
                0
              )}%(+${(
                (result.state.value.info?.properties?.伤害系数?.[3] ?? 0) * 100
              ).toFixed(0)}%)` }}
            </span>
          </view>
          <view class="store-eq-data-cell">
            <span class="data-cell-label">出血伤害</span>
            <span class="data-cell-data">
              {{ `${((result.state.value.info?.properties?.伤害比例?.[4] ?? 0) * 100).toFixed(
                0
              )}%(+${(
                (result.state.value.info?.properties?.伤害系数?.[4] ?? 0) * 100
              ).toFixed(0)}%)` }}
            </span>
          </view>
        </view>
      </view>
      <view v-else class="calc-res-box">
        <view class="hr" />
        <view class="store-eq-data-row">
          <view class="store-eq-data-cell">
            <span class="data-cell-label">站街</span>
            <span class="data-cell-data">{{
              (result.state.value.info?.站街?.智力 ?? result.state.value.info?.站街?.体力 ?? result.state.value.info?.站街?.精神 ?? 0).toFixed(0)
            }}</span>
          </view>
          <view class="store-eq-data-cell">
            <span class="data-cell-label">适用数值</span>
            <span class="data-cell-data">{{ (result.state.value.info?.properties?.apply_value ?? 0).toFixed(0) }}</span>
          </view>
        </view>
        <view class="store-eq-data-row">
          <view class="store-eq-data-cell">
            <span class="data-cell-label">BUFF量</span>
            <span class="data-cell-data">{{ `${(result.state.value.info?.properties?.buffer_power_value ?? 0).toFixed(0)}(+${(result.state.value.info?.properties?.buffer_power_per ?? 0).toFixed(0)}%)`
            }}</span>
          </view>
          <view class="store-eq-data-cell">
            <span class="data-cell-label">装备CDR</span>
            <span class="data-cell-data">{{
              ((1 - (result.state.value.info?.properties?.冷却缩减 ?? 0) / (1 + (result.state.value.info?.properties?.冷却恢复 ?? 0))) * 100).toFixed(2)
            }}%</span>
          </view>
        </view>
        <view class="store-eq-data-row">
          <view class="store-eq-data-cell">
            <span class="data-cell-label">BUFF等级</span>
            <span class="data-cell-data">{{ (result.state.value.info?.properties?.buff_level ?? 0).toFixed(0) }}</span>
          </view>
          <view class="store-eq-data-cell">
            <span class="data-cell-label">觉醒等级</span>
            <span class="data-cell-data">{{ (result.state.value.info?.properties?.awake_level ?? 0).toFixed(0) }}</span>
          </view>
        </view>

        <view class="store-eq-data-row">
          <view class="store-eq-data-cell">
            <span class="data-cell-label">力智加成</span>
            <span class="data-cell-data">{{ (result.state.value.total_data?.[2] ?? 0).toFixed(0) }}</span>
          </view>
          <view class="store-eq-data-cell">
            <span class="data-cell-label">三攻加成</span>
            <span class="data-cell-data">{{ (result.state.value.total_data?.[3] ?? 0).toFixed(0) }}</span>
          </view>
        </view>
      </view>
    </view>
    <view v-else>
      <view class="hr" />
      <view v-if="charStore.is_delear">
        <view v-for="skill in skills" :key="skill.name" class="flex items-center h-30px justify-between my-5px">
          <image class="w-28px h-28px" :src="getImage(`characters/${charStore.alter}/skill/${skill.name}.png`)" />
          <view class="w-60px  flex items-center justify-center">
            {{ skill.cd.toFixed(2) }}s
          </view>
          <view class="w-60px  flex items-center justify-center text-hex-3e8848">
            {{
              ((1 - skill.cd / skill.cd_o) * 100).toFixed(2)
            }}%
          </view>
          <view class="w-40px flex items-center justify-center">
            {{
              skill.count
            }}次
          </view>
          <view class="w-70px flex items-center justify-center">
            {{
              (skill.damage / skill.count / 100000000).toFixed(2)
            }}亿
          </view>
          <view class="w-70px flex items-center justify-center">
            {{
              (skill.damage / 100000000).toFixed(2)
            }}亿
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .selected {
    color: #ffcc33;
  }

  .calc-res-box {
  padding: 15px 0;
  position: relative;
  padding-top: 0px;
}
.hr {
    border-bottom: 1px solid #333;
    margin-bottom: 7px;
    margin-top: 10px;

    &:first-child {
      margin-top: 0px;
    }
  }

.store-eq-data-row {
  display: flex;
  justify-content: center;
  margin-bottom: 7px;

  .data {
    font-size: 18px;
  }

  .store-eq-data-cell {
    width: calc(50% - 8px);

    &:nth-child(2), &:nth-child(3) {
      margin-left: 16px;
      // padding-right: 12px;
    }

    &.only-cell {
      width: 100%;
      display: flex;
      // padding-right: 12px;

      .data-cell-label {
        width: 60px;
      }

      .data-cell-data {
        width: calc(100% - 60px);
        text-align: right;

        .rq-prop-type-item {
          display: inline-block;
          margin-left: 10px;
        }
      }
    }

    .data-cell-label {
      color: #726643;
    }

    .data-cell-data {
      float: right;
      color: #3e8848;
    }
  }
}
</style>
